import React, {PureComponent} from 'react'
import Tabs from '../Tabs'
import '../../css/temper.scss'
import '../Tabs/tab.scss'
import '../../css/tab.scss'
import TemperImg from '../component/video/video-layout'
import {connect} from 'react-redux'
import Mask from '../component/mask/mask'
import VideoPlayer from '../component/video/video-box'
import '../../css/video.scss'
import config from '../component/layout/layout-config'

const Tab = Tabs.Tab;
class Video extends PureComponent {
    state = {
        mask: false,
        content: ''
    }

    hideMask = () => {
        //clear
        this.setState({
            mask: false
        })
    }

    /*匹配温湿度数据*/
    getTemperData = (title) => {
        // const temperData =  this.props.temperData.toJS()
        // if (!temperData.length) {
        //     return []
        // }
        // return temperData.filter(t => t.location === title).map(t => {
        //     return {
        //         pos: [t.sensorLocationX, t.sensorLocationY],
        //         sensorId: t.sensorId,
        //         humidity: t.humidity,
        //         temperature: t.temperature
        //     }
        // })
    }
    openVideo = () => {
        this.setState({
            mask: true, content: <VideoPlayer/>
        })
    }

    render() {
        config.forEach(layout => {
            layout.data.forEach(data => {
                // data.device
                data.device = []
                const posArr = [
                    [.2, .1],
                    [.12, .65],
                    [.2, .64],
                    [.66, .3],
                    [.33, .4],
                    [.8, .42],
                    [.53, .53],
                    [.6, .63],
                    [.7, .76],
                    [.4, .8],
                ]
                for (let i = 0; i < 10; i++) {
                    data.device.push({
                        pos: [posArr[i][0] * data.size[0], posArr[i][1] * data.size[1]]
                    })
                }
            })
        })

        return (
            <div className="full-container">
                <Mask show={this.state.mask} hideMask={this.hideMask}>
                    {this.state.mask && this.state.content}
                </Mask>
                <Tabs defaultActiveKey="1" className='custom-tab'>
                    {config.map((c, i) => {
                        return <Tab tab={c.name} key={`temper-img-${c.key}-${i}`}>
                            {c.data.map((d, index) => {
                                return <div key={`temper-img-${c.key}-${i}-${index}`}
                                            className="temper-img-container" style={{width: d.width}}>
                                    <p>{d.title}</p>
                                    <TemperImg {...d} handClick={this.openVideo}/>
                                </div>
                            })}
                        </Tab>
                    })}
                </Tabs>
            </div>
        )
    }

}

function mapStateToProps({}) {
    return {}
}

export default connect(mapStateToProps)(Video)
